<template>
    <div class="shell-default">
        <div class="shell-d-view">
            <slot></slot>
        </div>
        <div class="shell-d-nav" v-if="this.$route.meta.isNav">
            <div class="n-item"
                 :key="key"
                 :class="{'n-item-active': item.name === $route.name}"
                 @click="rep(item.path)"
                 v-for="(item, key) in nav">
                <i class="iconfont" :class="item.meta.navIcon"></i>
                <span>{{item.meta.title}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['nav']
    }
</script>

<style lang="less">
    .shell-default {

        .shell-d-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: white;
            box-shadow: 0 0 10px 0 rgba(2, 2, 2, 0.2);
            z-index: 1000;

            .n-item {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                flex-direction: column;
                height: 100px;
                color:#71777c;
                i{
                    font-size: 50px;
                }
                span{
                    font-size: 28px;
                }
                &-active{
                    color:#007fff;
                }
            }
        }
    }
</style>